<template>
    <div class="homepage">
        <el-breadcrumb class="crumb" separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="homepage-wrap">
            <div class="el-row">
                <div class="homepage-block el-col-14">
                    <total-data></total-data>
                </div>
                <div class="homepage-block el-col-10">
                    <recent-budget></recent-budget>
                </div>
            </div>
            <div class="el-row">
                <div class="homepage-block el-col-24">
                    <line-chart></line-chart>
                </div>
            </div>
            <div class="el-row">
                <div class="homepage-block el-col-12">
                    <income-pie></income-pie>
                </div>
                <div class="homepage-block el-col-12">
                    <payment-pie></payment-pie>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import TotalData from '@/pages/homepage-charts/TotalData'
import RecentBudget from '@/pages/homepage-charts/RecentBudget'
import LineChart from '@/pages/homepage-charts/LineChart'
import IncomePie from '@/pages/homepage-charts/IncomePie'
import PaymentPie from '@/pages/homepage-charts/PaymentPie'
export default {
    data(){
        return{

        }
    },
    components:{
        TotalData,
        RecentBudget,
        LineChart,
        IncomePie,
        PaymentPie
    }
}
</script>
<style lang="less">
.homepage{
    width:100%;
    height: 100%;
    overflow-y: scroll;
    .crumb{
        width:100%;
        height: 50px;
        background: #ffffff;
        padding:0 15px;
        box-sizing: border-box;
        line-height: 50px;
    }
    .homepage-wrap{
        .homepage-block{
            padding:1.5px;
            box-sizing: border-box;
            &>div{
                padding:0 15px;
                box-sizing: border-box;
                background: #ffffff;
                border-radius: 5px;
            }
            .block-title{
                height: 50px;
                width: 100%;
                background: #ffffff;
                position: relative;
                line-height: 50px;
                padding-left: 15px;
                box-sizing: border-box;
                font-size: 16px;
                font-weight: 500;
                display: flex;
                justify-content: space-between;
                align-items: center;
                &:after{
                    content: '';
                    width:3px;
                    height: 28px;
                    background: #269fe0;
                    position: absolute;
                    top: 11px;
                    left: 0;
                }
            }
        }
    }
}
</style>